<template>
	<div class="store-login">
		<el-row class="store-login-container">
			<el-row class="store-login-header">
				<div class="clearfix" style="height: 80px;width: 300px;margin: auto;">
					<div style="float: left;height: 100%;padding-top: 10px;box-sizing: border-box;margin-right: 12px;">
						<el-image :src="require('../assets/logo.jpg')" style="width:30px;height: 30px;">
						</el-image>
					</div>
					<div style="float: left;">
						<p style="font-size:24px; letter-spacing: 7px; color: #FFFFFF;">红袖书城登录</p>
					</div>
				</div>
			</el-row>
			<el-col :span="24">
				<el-row style="margin:120px auto;width: 400px;">
					<el-form status-icon ref="form" :model="loginForm" :rules="rules">
						<el-form-item>
							<el-input prefix-icon="el-icon-unlock" placeholder="请输入账号/手机号"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input prefix-icon="el-icon-key" placeholder="请输入密码"></el-input>
						</el-form-item>
						<el-form-item>
							<slider @passed="passed"></slider>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" style="width:100%;letter-spacing: 7px;" @click="login">登录</el-button>
						</el-form-item>
						<el-form-item>
							<el-row>
								<el-col :span="12">
									<el-row style="text-align: left;color: #66B1FF;">
										<router-link to="/forget" style="text-algin:left ;text-decoration: none;color: #66B1FF;">忘记密码?</router-link>
									</el-row>
								</el-col>
								<el-col :span="12">
									<el-row style="text-align:right;color: #66B1FF;">
										<router-link to="/register" style="text-algin:right;text-decoration: none;color: #66B1FF;">没有账号，去注册</router-link>
									</el-row>
								</el-col>
							</el-row>
						</el-form-item>
					</el-form>
				</el-row>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import Slider from '../component/Slider.vue'
	export default {
		components: {
			Slider
		},
		data() {
			const isNotNull = (rule, value, callback) => {
				if (value) {
					callback()
				} else {
					callback(new Error("不能为空"))
				}
			}
			return {
				loginForm: {
					username: null,
					password: null
				},
				rules: {
					username: [{
						validator: isNotNull,
						trigger: 'blur'
					}],
					password: [{
						validator: isNotNull,
						trigger: 'blur'
					}]
				},
				checked: false
			}
		},
		methods: {
			login() {
				console.log(this.checked)
			},
			passed(val) {
				this.checked = val
			}
		}
	}
</script>

<style>
	.store-login,
	.store-login-container {
		height: 100%;
		width: 100%;
		position: relative;
	}

	.store-login-header {
		background-color: #409EFF;
		height: 80px;
		line-height: 80px;
		overflow: hidden;
	}

	.divider {
		border-left: 1px;
		border-color: #dcdfe6;
		height: 100%;
	}
</style>
